<template>
  <el-button size="large" style="float: left;margin:20px 10px 0 0" type="success" @click="updateDialogShow=true">修改登录密码
  </el-button>
  <el-button size="large" style="float: left;margin:20px 10px 0 0" type="success" @click="updatePayDialogShow()">
    修改个人支付密码
  </el-button>
  <!-- 修改个人密码对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改密码" width="550">
    <el-form>
      <el-form-item label="请输入旧密码" label-width="25%">
        <el-input v-model="updatePassWord.oldPassword" placeholder="请输入旧密码" style="width: 300px" type="password"/>
      </el-form-item>
      <el-form-item label="请输入新密码" label-width="25%">
        <el-input v-model="updatePassWord.newPassword1" placeholder="请输入新密码" style="width: 300px"
                  type="password"/>
      </el-form-item>
      <el-form-item label="请再次输入新密码" label-width="25%">
        <el-input v-model="updatePassWord.newPassword2" placeholder="请再次输入新密码" style="width: 300px"
                  type="password"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="chgPwd">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改个人密码对话框结束-->
  <!-- 修改支付密码对话框开始 -->
  <el-dialog v-model="updatePayDialogShow1" title="修改支付密码" width="550">
    <el-form>
      <el-form-item label="请输入支付密码" label-width="25%">
        <el-input v-model="updatePayPassWord.oldPayPassword" placeholder="请输入支付密码" style="width: 300px"
                  type="password"/>
      </el-form-item>
      <el-form-item label="请输入新密码" label-width="25%">
        <el-input v-model="updatePayPassWord.newPayPassword1" placeholder="请输入新密码" style="width: 300px"
                  type="password"/>
      </el-form-item>
      <el-form-item label="请再次输入新密码" label-width="25%">
        <el-input v-model="updatePayPassWord.newPayPassword2" placeholder="请再次输入新密码" style="width: 300px"
                  type="password"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updatePayDialogShow1 = false">取消</el-button>
        <el-button type="primary" @click="updatePayPassword1">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改支付密码对话框结束-->
  <!-- 修改无支付密码时支付密码对话框开始 -->
  <el-dialog v-model="updatePayDialogShow2" title="修改支付密码" width="550">
    <el-form>
      <el-form-item label="请输入密码" label-width="25%">
        <el-input v-model="updatePayPassWord.newPayPassword1" placeholder="请输入密码" style="width: 300px"
                  type="password"/>
      </el-form-item>
      <el-form-item label="请再次输入密码" label-width="25%">
        <el-input v-model="updatePayPassWord.newPayPassword2" placeholder="请再次输入密码" style="width: 300px"
                  type="password"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updatePayDialogShow2 = false">取消</el-button>
        <el-button type="primary" @click="updatePayPassword2">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改无支付密码时支付密码对话框结束-->
</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
import router from "@/router/index.js";

const tokenStore = useTokenStore()

//保存修改密码信息的对象
const updatePassWord = ref({
  oldPassword: null,
  newPassword1: null,
  newPassword2: null
})
const updatePayPassWord = ref({
  oldPayPassword: null,
  newPayPassword1: null,
  newPayPassword2: null
})
const updateDialogShow = ref(false)
//有支付密码时修改支付密码
const updatePayDialogShow1 = ref(false)
//无支付密码时修改支付密码
const updatePayDialogShow2 = ref(false)
//用户信息
const userInfo = ref({})

//确认修改登陆密码
function chgPwd() {
  userApi.updatePassword(updatePassWord.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
          updatePassWord.value = {
            oldPassword: null,
            newPassword1: null,
            newPassword2: null
          }
          //重置token并退出
          logout();

        } else {
          ElMessage.error(resp.msg)
        }
      })
}

//注销
function logout() {
  //重置token
  tokenStore.$reset()
  //跳转登录页
  router.push("/user/login")
}

function updatePayDialogShow() {
  if (userInfo.value.payPassword == null) {
    updatePayDialogShow2.value = true;
  } else {
    updatePayDialogShow1.value = true;
  }
}

function getInfo() {
  userApi.getInfo()
      .then(resp => {
        userInfo.value = resp.data;
      })

}

function updatePayPassword1() {
  userApi.updatePayPassword1(updatePayPassWord.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          updatePayDialogShow1.value = false
          updatePayPassWord.value = {
            oldPayPassword: null,
            newPayPassword1: null,
            newPayPassword2: null
          }
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

function updatePayPassword2() {
  userApi.updatePayPassword2(updatePayPassWord.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          updatePayDialogShow2.value = false;
          updatePayPassWord.value = {
            oldPayPassword: null,
            newPayPassword1: null,
            newPayPassword2: null
          }
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

getInfo()
</script>

<style scoped>

</style>